<template>
    <div>
      <h2>v-once指令</h2>
      <h2>h2: {{ counter }}</h2>
      <h3 v-once>h3-v-once: {{ counter }}</h3>
      <button @click="increment">+1</button>
      <hr />
      <h2>v-text指令</h2>
      <div>v-text指令: <span v-text="message"></span></div>
      <hr />
      <h2>v-html指令</h2>
      <div>v-html指令: <span v-html="htmlStr"></span></div>
      <p>
        v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出,
        一般v-text和插值语法相似
        <a href="https://blog.csdn.net/fushan2012/article/details/123067394"
          >https://blog.csdn.net/fushan2012/article/details/123067394</a
        >
      </p>
      <hr />
      <h2>v-pre指令</h2>
      <p>直接把插槽原样输出</p>
      <div v-pre>{{ message }}</div>
      <hr />
      <h2>v-cloak</h2>
      <p>使用 v-cloak 指令来解决屏幕闪动的问题吧</p>
      <div v-cloak>{{ message }}
    盛大开放活动</div>
    </div>
  </template>
  
  <!-- <script>
  export default {
    name: 'vonce',
    data() {
      return {
        counter: 100,
        message: 'Hello Vue.js 2',
        htmlStr: '<span style="color: red">红色</span>'
      }
    },
    methods: {
      increment() {
        this.counter++
      }
    }
  }
  </script> -->
  
  <script setup>
  defineOptions({
    name: 'page-zhiling'
  })
  import { ref } from 'vue'
  const counter = ref(100)
  const message = ref('Hello Vue.js 2')
  const htmlStr = ref('<span style="color: red">红色</span>')
  function increment() {
    counter.value++
  }
  </script>
  
  <style lang="scss" scoped>
  [v-cloak] {
    display: none;
  }
  </style>
  